<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSX语法规则</title>
</head>
<body>
<div id="test">

</div>

</body>
</html>

<style>
    .title{
        background-color: orange;
    }
</style>

<!--引入react核心库-->
<script type="text/javascript" src="../Js/react.development.js"></script>
<!--引入react-dom库,用于支持react操作dom-->
<script type="text/javascript" src="../Js/react-dom.development.js"></script>
<!--引入babel库,用于将jsx转成js-->
<script type="text/javascript" src="../Js/babel.min.js"></script>

<script type="text/babel">//此处一定要写text/babel，将jsx转成js
const date=new Date()

// 创建虚拟DOM
const VDOM=(
   <div>
       <h1>
           <span className="title" style={{color:'white'}}>hello react{date.getFullYear()}</span>
       </h1>
       <h1>
           <span className="title1" style={{color:'orange'}}>hello react{date.getFullYear()}</span>
       </h1>
       <input type="text"/>
   </div>

)//此处一定不要写引号，因为不是字符串


ReactDOM.render(VDOM,document.getElementById("test"))

/* JSX语法规则：
       1.定义虚拟DOM时,不要用引号
       2.虚拟DOM中混入JS表达式时，要用{}
       3.样式的类名指定不要用class,要用className
       4.内联样式要用style:{{key:value;key:value}}}的格式
       5.只有一个根标签
       6.标签必须闭合
       7.标签首字母:
         (1).首字母小写，则会转化成同名的html标签，找不到同名的就报错
         (2).首字母大写，react就会渲染对应的组件，若组件没有定义，就报错
* */
</script>